<template>
	<view class="u-p-b-40">
		<u-navbar title-color="#333" title-bold title-size="36" title="充值余额" :border-bottom="false"
			:background="{backgroundColor: '#FEF1E2'}"></u-navbar>
		<view class="top-div">
			<view class="jf-div">
				<image class="yue-bg" src="../../../../static/img/mine/yue-bg.png" mode=""></image>
				<view class="yue-div">
					充值余额

					<view class=" font_weight">
						<span class="u-font-32">￥</span>
						<span class="u-font-56">4,532.00</span>
					</view>
					<view class="u-m-t-24">
						<view class="">
							已消费金额
						</view>
						<view class="font_weight">
							<span>￥</span>
							<span class="u-font-44">4,532.00</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-l-40 font_16_333 font_weight u-m-b-24">
			消费记录
		</view>
		
			<view class="or-div" >
				<view class="or-item" v-for="(item,index) in 2" :key="index">
					<view class="item-top flex flex_sb border_bottom_F6F6F6">
						<view class="flex">
							<!-- <image class="i-icon" src="../../../../static/img/home/t-1.png" mode=""></image> -->
							<view class="font_16_333 font_weight u-m-l-16">
								电话咨询
							</view>
						</view>
						<view class="zt">
							<span class="u-font-24">￥</span>59.90
						</view>
					</view>
					<view class="item-main u-padding-24 ">
						<view class="">
							<span class="font_14_666 font_weight">购买用户：</span>
							<span class="font_14_333">用户21242</span>
						</view>
						<view class="u-m-t-24">
							<span class="font_14_666 font_weight">订单编号：</span>
							<span class="font_14_333">8888821242</span>
						</view>
						<view class="u-m-t-24 flex_only">
							<span class="font_14_666 font_weight">问题描述：</span>
							<view class="vldiv">
								<view class="line_2">
									简单的问题描述文字简单的问题描述文字简单的问题描述文字简单的问题描述文字简
								</view>
								<view class=" font_14_666 u-m-t-14">
									2024-04-12 16:12:23
									<span class="didian">北京</span>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '已结算订单'
				}, {
					name: '未结算订单'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.jilv {
		border-radius: 16rpx;
		background: #FFFFFF;
		width: 686rpx;
		margin: 20rpx auto;
		padding: 0 24rpx;

		.text-tx {
			font-weight: bold;
			border-bottom: 2rpx solid #EBEBEB;
			;
			font-size: 32rpx;
			color: #222222;
			height: 112rpx;
		}

		.jl-item {
			// width: 686rpx;
			height: 142rpx;
			background: #FFFFFF;

			.tx-icon {
				width: 64rpx;
				height: 64rpx;
			}

			.fh {
				font-size: 24rpx;
				color: #FC3A30;
			}

			.num {
				font-size: 36rpx;
				color: #FC3A30;
			}
		}
	}
	.li-item{
		width: 686rpx;
		padding:  24rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 18rpx auto;
		
		.fyntn{
			background-color: #FCEFDF;
		}
		
		.headimg{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
		
		.bq{
			width: 80rpx;
			height: 36rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #34302D;
			line-height: 36rpx;
			text-align: center;
		}
		.bq1{
			background: linear-gradient( 180deg, #FFEDBE 0%, #FCE4A5 100%);
		}
		.bq2{
			background: linear-gradient( 180deg, #FCEFDF 0%, #F5DBC4 100%);
		}
		.bq3{
			background: linear-gradient( 180deg, #C4E9FF 0%, #DBF2FF 13%, #E4E9FF 43%, #ECE4FF 83%, #BEE7FF 100%);
		}
		.bq4{
			background: linear-gradient( 180deg, #555555 0%, #333333 100%);
			color: #F4E1C3;
		}
		.num1{
			font-weight: bold;
			font-size: 36rpx;
			color: #FC3A30;
		}
		.num2{
			font-weight: bold;
			font-size: 36rpx;
			color: #307EFC;
		}
	}
	.top-div {
		width: 750rpx;
		height: 300rpx;
		background: linear-gradient(180deg, #FEF1E2 0%, #FFF1E1 59%, rgba(254, 241, 226, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;


		.jf-div {
			position: relative;
			width: 750rpx;
			height: 274rpx;

			.yue-bg {
				width: 686rpx;
				height: 274rpx;
				position: absolute;
				top: 0;
				left: 32rpx;
			}

			.yue-div {
				width: 686rpx;
				height: 274rpx;
				position: absolute;
				top: 0;
				left: 32rpx;
				z-index: 2;
				padding: 24rpx 32rpx;
				color: #502C05;

				.u-font-56 {
					font-size: 56rpx;
				}

				.u-font-44 {
					font-size: 44rpx;
				}
			}

			.tixinbtn {
				font-size: 24rpx;
				color: #FFF1D3;
				padding: 8rpx 24rpx;
				background: #502C05;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
			}
		}

		.jf-num {
			font-weight: bold;
			font-size: 56rpx;
			color: #333333;
		}

	}
	
	
	.or-div {
		
		
	
		.or-item {
			width: 686rpx;
			// height: 568rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 32rpx;
			margin: 18rpx auto;
	
			.item-top {
				padding: 24rpx;
				// border-bottom: 2rpx solid #F1F1F1;
	
				.i-icon {
					width: 48rpx;
					height: 48rpx;
				}
				
				.zt {
					font-weight: 600;
					font-size: 36rpx;
					color: #FC3A30;
				}
			}
			.i-icon2{
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}
			.item-main {
				.fwcg-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					margin-right: 4rpx;
				}
	
				.vldiv {
					width: 500rpx;
				}
	
				.didian {
					border-left: 1px solid #C4C4C4;
					padding-left: 12rpx;
					margin-left: 12rpx;
				}
	
	
			}
	
			.or-bottom {
				height: 100rpx;
				border-top: 2rpx solid #F1F1F1;
				padding-right: 24rpx;
	
				.btn1 {
					width: 160rpx;
					height: 64rpx;
					background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
					margin-left: 16rpx;
				}
	
				.btn2 {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #ADADAD;
					font-size: 28rpx;
					color: #666666;
					line-height: 64rpx;
					text-align: center;
					margin-left: 16rpx;
				}
			}
		}
	}
	
</style>